<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      /* 
        1.以前的做法 ： 将axios挂载到Vue构造函数的实例中  Vue.prototype.$axios = axios
            1.1 解决什么问题 ： 每一个组件(vue实例)可以通过原型链直接访问axios,而无需用一次导入一次
            1.2 未解决什么问题 ： 每一个接口的地址、参数还是要在组件内部写，不便于维护
                * 之前大事件封装一个http.js网络中间层来处理整个项目所有接口，维护起来很方便

        2.如何在vue项目中使用axios封装网络中间层
            const instance = axios.create()
                作用1 ： 全局配置axios，如基地址，网络超时等配置
                作用2 ： 得到一个自定义axios对象
                    * axios.create()相当于创建了一个包含全局配置的axios的副本
                    * instance与axios不是同一个对象，instance多了全局配置
                    * 为什么不直接使用axios.defaults来设置全局配置呢？
                      * 原因：* 原因：axios.defaults只是全局配置，不能做到将项目所有接口封装到模块中（不方便模块化开发）
        */

      const instance = axios.create({
        baseURL: 'https://autumnfish.cn/', //设置基地址
        timeout: 10000 //设置网络超时，超过10秒直接作废
        // headers: { 'X-Custom-Header': 'foobar' }//自定义请求头
      })

      console.log(instance)

      //封装接口

      //1.无参数接口
      function getHots () {
        //instance()返回值是一个promise对象 ： axios底层就是promise处理异步ajax
        return instance({
          url: '/search/hot',
          method: 'get'
        })
      }
      //调用接口
      getHots()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(res)
        })

      // 2.有参数接口 ： 这里形参名字跟实际接口的参数名一样，就可以使用解构赋值了
      function searchMusic ({ keywords }) {
        return instance({
          url: '/search',
          method: 'get',
          params: {
            keywords//keywords:keywords   
          }
        })
      }

      // 调用 有参数的方法
      searchMusic({ keywords: '好日子' }).then(res => {
        console.log('搜索结果')
        console.log('res:', res)
      })
    </script>
  </body>
</html>
